<template>
  <div>
      <header>
          <van-icon @click="goback" name="arrow-left" size="0.6rem" />
          <span>一起拼</span>
      </header>
        <van-tabs @click="select(active)" class="nav" v-model="active" line-width="0" animated :border="false" title-active-color="#804097">
            <van-tab  title="热门" >
                    <groupshop :shoplist="shop_list"></groupshop>
            </van-tab>
            <van-tab class="price">
                <template #title>
                        价格
                        <van-icon :name="priceUpDown?img:''" size="0.3rem"/>
                </template>
                    <groupshop :shoplist="shop_list"></groupshop>
            </van-tab>
            <van-tab >
                <template #title > 
                    {{name}}<van-icon  :name=" isShow ?'arrow-up' :'arrow-down'" size="0.2rem" /> 
                </template>
                    <!-- <groupNav :shoplist="shop_nav"></groupNav> -->
                    <groupshop :shoplist="shop_list"></groupshop>
            </van-tab>
        </van-tabs>
      <div class="content-box" v-show="isShow">
            <span @click="searchClick(item.name , item.catagoryId)"  v-for="item  in nav_list" :key="item.catagoryId"  class="spanColor">
                {{item.name}}
            </span>
      </div>
      
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import groupshop from '../components/groupShop'
import groupNav from '../components/groupNav'

export default {
    components:{
        groupshop,
        groupNav
    },
    data() {
        return {
            active: 0,
            img:'',
            isClick:false,
            nav_list:'',
            shop_list:'',
            isShow : false,
            priceUpDown:false,
            name:'搜索',
            ruleType:2,
            shop_nav:''
        }
    },
    mounted() {
        axios({
                    url:'/group',
                    method:'get',
                    params:{
                        isTag: 1,
                        ruleType: 2,
                        pageIndex: 1,
                        pageSize: 30,
                        sourceType: 2
                    }
                }).then((data)=>{
                    this.shop_list = data.data.data.productList
                })
    },
    methods: {
        goback(){
            history.go(-1)
        },
        select(active){
            if(active === 0){
                axios({
                    url:'/group',
                    method:'get',
                    params:{
                        isTag: 1,
                        ruleType: 2,
                        pageIndex: 1,
                        pageSize: 30,
                        sourceType: 2
                    }
                }).then((data)=>{
                    this.shop_list = data.data.data.productList
                })
            }
            if(active === 1){
                this.priceUpDown = !this.priceUpDown
                if(this.priceUpDown){
                    this.ruleType = 1
                }else{
                    this.ruleType = 0
                }
                axios({
                    url:'/group',
                    method:'get',
                    params:{
                        isTag: 1,
                        ruleType: this.ruleType,
                        pageIndex: 1,
                        pageSize: 30,
                        sourceType: 2
                    }
                }).then((data)=>{
                    this.shop_list = data.data.data.productList
                })
            }
            if(active === 2){
                this.isShow = !this.isShow
                axios({
                    url:"/navList1",
                    }).then((result)=>{
                        let data = result.data.data.catagoryList
                        this.nav_list = [{name:'热门',catagoryId:'hot'},...data]
                })
                
            }
        
        },
        searchClick( name , id ){
            this.isShow = !this.isShow
            this.name = name
            axios({
                    url:'/group',
                    method:'get',
                    params:{
                        isTag: 0,
                        ruleType: 2,
                        pageIndex: 1,
                        pageSize: 30,
                        sourceType: 2,
                        categoryId:id
                    }
                }).then((data)=>{
                    this.shop_list = data.data.data.productList
                })
        }
    },
}
</script>
<style lang="stylus" scoped>
    header 
        width 100%
        height 0.88rem
        border-bottom 1px #f4f4f4 solid
        display flex
        align-items center
        span 
            width 100%
            text-align center
            line-height 0.88rem
            font-size 0.32rem
            font-weight 400
    .content-box
        width 100%
        height 7.3rem
        position fixed
        top 1.5rem
        padding 0.2rem 0
        left 0
        background-color #ffffff
        z-index 999999
        span 
            display block
            float left
            width 15%
            height 0.6rem
            border 1px solid #EEE
            text-align center
            font-size .24rem !important
            line-height 0.6rem
            margin-left 0.6rem 
            margin-bottom 0.2rem
            font-weight 100
            color #666 !important
        span.noactive
            border 1px solid #999999
        span.active
            border 1px solid #7f4395
        .spanColor
            color black
    
</style>